<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <select name="" id="pro">
        <option value="">请选择</option>
    </select>
    <select name="" id="city">
        <option value="">请选择</option>
    </select>
    <select name="" id="area">
        <option value="">请选择</option>
    </select>

    <script src="../js/ajax.js"></script>

    <script>

        ajax({
            path : '../data/city.json' ,
            type : 'get' ,
            success : res => {
                console.log(res);
                const {list} = res ;
                // 渲染省份
                if(list) {
                    let html = '<option value="">请选择</option>' ;
                    list.forEach(item => {
                        html += `<option value="${item.name}">${item.name}</option>`
                    })
                    document.querySelector('#pro').innerHTML = html;

                    document.querySelector('#pro').onchange = function() {
                        const proVal = this.value ;
                        // console.log(proVal)
                        // 渲染市
                        // 找到满足条件的数据
                        const res = list.filter(item => item.name === proVal) ;
                        console.log(res);
                        const cityList = res[0].list ;
                        console.log(cityList);

                        // 渲染
                        let html = '<option value="">请选择</option>' ;
                        cityList.forEach(item => {
                            html += `<option value="${item.name}">${item.name}</option>`
                        })
                        document.querySelector('#city').innerHTML = html;

                        // 
                        document.querySelector('#city').onchange = function() {
                            const cityVal = this.value ;
                            const res = cityList.filter(item => item.name === cityVal) ;
                            const areaList = res[0].list ;

                            // 渲染
                            let html = '<option value="">请选择</option>' ;
                            areaList.forEach(item => {
                                html += `<option value="${item.name}">${item.name}</option>`
                            })
                            document.querySelector('#area').innerHTML = html;
                        }
                    }
                }

            }
        })

    </script>
    
</body>
</html>